<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body>
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>注册</legend>
</fieldset>
<div><span id="msg"> 请注册</span></div>
<form class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label">登录名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">户籍</label>
        <div class="layui-input-block">
            <select name="city" lay-filter="aihao">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">深圳</option>
                <option value="3">广州</option>
                <option value="4">西安</option>
            </select>
        </div>
    </div>

    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">爱好</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="checkbox" name="like[write]" title="写作">-->
            <!--<input type="checkbox" name="like[read]" title="阅读">-->
            <!--<input type="checkbox" name="like[daze]" title="发呆">-->
        <!--</div>-->
    <!--</div>-->

    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">个人介绍</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
        </div>
    </div>


    <!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
    <script src="../static/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function(){
            var form = layui.form,
                $ = layui.jquery
                //,layer = layui.layer
               // ,layedit = layui.layedit
             //   ,laydate = layui.laydate;

            // //日期
            // laydate.render({
            //     elem: '#date'
            // });
            // laydate.render({
            //     elem: '#date1'
            // });

            //创建一个编辑器
           // var editIndex = layedit.build('LAY_demo_editor');

            // //自定义验证规则
            // form.verify({
            //     title: function(value){
            //         if(value.length < 5){
            //             return '标题至少得5个字符啊';
            //         }
            //     }
            //     ,pass: [
            //         /^[\S]{6,12}$/
            //         ,'密码必须6到12位，且不能出现空格'
            //     ]
            //     ,content: function(value){
            //         layedit.sync(editIndex);
            //     }
            // });

            //监听指定开关
            form.on('switch(switchTest)', function(data){
                layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });

            //监听提交
            form.on('submit(formDemo)', function(data){
               $.ajax({
                   url:"/register",
                   data:data.field,
                   dataType:"json",
                   type:"POST",
                   success:function (d) {
                     document.getElementById("msg").innerText=d.msg

                      window.location.href="/abc"
                       
                   }
               })

                //console.log(data.field)
                // layer.alert(JSON.stringify(data.field), {
                //     title: '最终的提交信息'
                // })
                return false;
            });



            // //表单取值
            // layui.$('#LAY-component-form-getval').on('click', function(){
            //     var data = form.val('example');
            //     alert(JSON.stringify(data));
            // });

        });
    </script>
</form>
</body>
</html>